<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="inc :: header('住房租赁公共信息管理系统')" />
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
        <!--头部start-->
        <div class="layui-header">
            <div class="layui-logo">
                <a href="#">
                    <img src="img/logo.jpg" />
                    <!--住房租赁公共信息管理系统-->
                </a>
            </div>

        <!--右侧个人信息-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="#" >
                    <img src="img/user.jpg" class="layui-nav-img"/>
                    <span th:text="${session.user.userName}">山竹</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="#">基本信息</a></dd>
                    <dd><a href="#">密码修改</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/logout">退出系统</a></li>
        </ul>
    </div>
    <!--头部end-->

    <!--左侧导航start-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">基础数据</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#" id="0" src="/ac/index" class="tab-active">小区管理</a></dd>
                        <dd><a href="#" id="1" src="/hc/index" class="tab-active">房源管理</a></dd>
                        <dd><a href="#" id="2" src="/guc/index" class="tab-active">租方管理</a></dd>
                        <dd><a href="#" id="3" src="" class="tab-active">家庭管理</a></dd>
                        <dd><a href="#" id="4" src="" class="tab-active">建筑方管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">后台业务管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#" id="5" src="/agc/index" class="tab-active">合同管理</a></dd>
                        <dd><a href="#" id="6" src="/zjc/index" class="tab-active">租金管理</a></dd>
                        <dd><a href="#" id="7" src="" class="tab-active">水费管理</a></dd>
                        <dd><a href="#" id="8" src="" class="tab-active">电费管理</a></dd>
                        <dd><a href="#" id="9" src="" class="tab-active">物业费管理</a></dd>
                        <dd><a href="#" id="10" src="" class="tab-active">押金管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">数据图表</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#" id="11" src="/rc/base-pie" class="tab-active">基本饼图</a></dd>
                        <dd><a href="#" id="12" src="/rc/base-line-column-bar" class="tab-active">基本折线图</a></dd>
                        <dd><a href="#">混合图表</a></dd>
                    </dl>
                </li>
               <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">后台管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#" id="21" src="/uc/index" class="tab-active">用户管理</a></dd>
                        <dd><a href="#" id="22" src="/muc/index" class="tab-active">菜单管理</a></dd>
                        <dd><a href="#" id="23" src="/roc/index" class="tab-active">角色管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!--左侧导航end-->

    <!--中间部分start-->
    <div class="layui-body">
        <div>
            <div class="layui-tab layui-tab-brief" lay-allowclose="true" lay-filter="tab01">
                <ul class="layui-tab-title">
                    <li class="layui-this">欢迎界面</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">欢迎内容</div>
                </div>
            </div>
        </div>
    </div>
    <!--中间部分end-->

    <!--底部部分start-->
    <div class="layui-footer">
        &copy;entor.com 底部版权声明
    </div>
    <!--底部部分end-->
</div>



<script th:inline="javascript">
    var flat = [[${@permission.hasPermi('admin')}]]
</script>

<script th:inline="javascript">
    $(function(){
        //createMenu();
        $('.layui-nav-item a span').click(function () {
           layer.open({
               title:'修改密码',
               type:2,//默认0-信息框，1-页面，2-iframe
               maxmin:true,//是否显示最大化最小按钮
               content:'/uc/editPwd',
               area:['40%','50%'],
               anim:5,
               btn:['确定保存','取消关闭']
           });
        });
    });
    function createMenu(){
        $.ajax({
            type:'post',
            url:'/muc/getMenuJsonByUserId',
            data:{
                uid:1
            },
            sync:false,
            dataType:'json',
            success:function(result){
                //result = JSON.parse(result);
                //jq的each循环遍历
                $.each(result,function(i,parentMenu){
                    var str = '<li class="layui-nav-item layui-nav-itemed"><a href="#">'+parentMenu.title+'</a>';
                    str += ' <dl class="layui-nav-child">'
                    var childMenu = parentMenu.children;
                    $.each(childMenu,function (j,menu) {
                        str += '<dd><a href="#" id="'+menu.id+'" src="'+menu.menuUrl+'" class="tab-active">'+menu.title+'</a></dd>';
                    });
                    str += "</dl></li>";
                    $('.layui-nav-tree').append(str);

                });
            }
        })
    }



    layui.use('element',function(){
        var element = layui.element;

        //触发tab的事件
        var active = {
            add:function(html,id,src){
                //需要用到element
                element.tabAdd('tab01',{
                    title:html,
                    content:'<iframe src="'+src+'" scrolling="auto" frameborder="no" style="width: 100%;min-height: 400px;"></iframe>',
                    id:id
                });
                FrameWH()
            },
            change:function(id){
                //切换到打开tab
                element.tabChange('tab01',id);
            }

        };
        //监听左侧菜单点击事件
        //$('.tab-active').click(function(){
        $(document).on('click','.tab-active',function(){//jq的动态监听事件  针对append追加元素时使用的
            var html = $(this).html();
            var id = $(this).attr('id');
            var lis = $('.layui-tab-title li[lay-id]');
            var src = $(this).attr('src');
            if(lis.length<=0){
                active.add(html,id,src);
            }else{
                var flat = false;
                $.each(lis,function(){
                    var id2 = $(this).attr('lay-id');
                    if(id==id2){
                        flat = true;
                    }
                });
                if(!flat){
                    active.add(html,id,src);
                }
            }
            active.change(id);
        })

        function FrameWH() {
            var h = $(window).height()-50;
            $("iframe").css("height",h+"px");
        }

    });
</script>
</body>
</html>
